<template>
  <el-row>
    <el-row style="margin-top:10px">
      <el-col align="center" :offset="2" :span="16">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="cutPage.pageNum"
          :page-sizes="[50, 100, 200]"
          :page-size="cutPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cutPage.total">
        </el-pagination>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-refresh" @click="search" size="mini">刷新</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="logs" :height="tableHeight" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.group" :stripe="true" size="small" border>
                <el-table-column label="任务" prop="title"></el-table-column>
                <el-table-column label="类型" prop="type" width="80"></el-table-column>
                <el-table-column label="状态" width="80">
                  <template slot-scope="scope">
                    {{ state[scope.row.state] }}
                  </template>
                </el-table-column>
                <el-table-column label="开始时间" width="160">
                  <template slot-scope="scope">
                    {{ scope.row.beginTime ? new Date(scope.row.beginTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
                  </template>
                </el-table-column>
                <el-table-column label="结束时间" width="160">
                  <template slot-scope="scope">
                    {{ scope.row.endTime ? new Date(scope.row.endTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
                  </template>
                </el-table-column>
                <el-table-column label="查看" width="60">
                  <template slot-scope="scope">
                    <i class="el-icon-document my-icon-btn" title="详细" @click="handleDetail(scope.$index, scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column label="任务组" prop="title"></el-table-column>
          <el-table-column label="执行人" width="120" prop="role"></el-table-column>
          <el-table-column label="开始时间" width="160">
            <template slot-scope="scope">
              {{ new Date(scope.row.beginTime).format('yyyy-MM-dd HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间" width="160">
            <template slot-scope="scope">
              {{ scope.row.endTime ? new Date(scope.row.endTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
            </template>
          </el-table-column>
          <el-table-column label="子任务" width="160">
            <template slot-scope="scope">
              {{ scope.row.group.filter(x => x.state === '1').length }} / {{ scope.row.group.length }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

      <!-- 日志详细弹窗 -->
      <log-detail :visible.sync="detailVisible" :row="detailRow" :winP="winP"></log-detail>
  </el-row>
</template>

<script type="text/javascript">
  import logDetail from './log-detail'
	export default {
    props: ['winP'],
    computed: {
      tableHeight () {
        return this.winP.height - 141
      }
    },
		data () {
			return {
        detailVisible: false,
        detailRow: {},
				logs: [],
        state: {
          '0': '未运行',
          '1': '成功',
          '2': '异常'
        },
        cutPage: {
          pageNum: 1,
          pageSize: 50,
          total: 0
        },
			}
		},
    mounted () {
      this.search()
    },
    methods: {
      async search () {
        let result = await this.$api.call({
          service: 'log/all',
          body: this.cutPage
        })
        this.$set(this, 'logs', result.logs)
        this.cutPage.total = result.total
      },
      handleSizeChange (val) {
        this.cutPage.pageSize = val
        this.search()
      },
      handleCurrentChange (val) {
        this.cutPage.pageNum = val
        this.search()
      },
      handleDetail (index, row) {
        this.$set(this, 'detailRow', row)
        this.detailVisible = true
      }
    },
    components: {
      logDetail
    }
	}
</script>